<template>
	<div class="role">
		<!-- 搜索顶部 -->
		<div class="search_box">
			<div class="search_top">
				<div class="search_title">
					<el-icon><Search /></el-icon>
					<span class="search_title_content">筛选搜索</span>
				</div>
				<div class="search_reset_button">
					<el-button>重置</el-button>
					<el-button type="primary" @click="handlerFilter">查询搜索</el-button>
				</div>
			</div>
			<div class="search_bottom">
				<span class="search_input_label">账号/姓名：</span>
				<div class="search_input_box">
					<el-input type="text" v-model="keyword" placeholder="请输入账号、姓名" />
				</div>
			</div>
		</div>
		<!-- 添加 -->
		<div class="add_box">
			<div class="add_left">
				<div class="add_left_icon">
					<el-icon><Tickets /></el-icon>
					<span class="add_left_icon_item">数据列表</span>
				</div>
			</div>
			<div class="add_right_btn">
				<el-button type="primary" @click="handleAddRole">添加</el-button>
			</div>
		</div>
		<!-- 角色列表 -->
		<div class="data_box">
			<el-table :data="tableList" border style="width: 100%">
				<el-table-column prop="id" label="编号" width="100" />
				<el-table-column prop="name" label="角色名称" width="180" />
				<el-table-column prop="description" label="描述" width="180" />
				<el-table-column prop="adminCount" label="用户数" width="100" />
				<el-table-column label="添加时间" width="200">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							{{ formatTime(scope.row.createTime) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否启用" width="100">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							<el-switch v-model.number="scope.row.status" :active-value="1" :inactive-value="0" @change="handleChange(scope.row)" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="200">
					<template #default="scope">
						<el-button size="small" type="primary" :text="true" @click="allocMenuFn(scope.row)">分配菜单</el-button>
						<el-button size="small" type="primary" :text="true" @click="allocResourceFn(scope.row)">分配资源</el-button>
						<el-button size="small" type="danger" :text="true" @click="showModal(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页器 -->
		<div class="pagination_box">
			<el-pagination
				v-model:current-page="pagination.currentPage"
				v-model:page-size="pagination.pageSize"
				:page-sizes="[10, 20, 50, 100]"
				:small="false"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<!-- 角色编辑 -->
		<RoleEdit :visible="modelVisible" @cancel="handleCancel" @confirm="handleConfirm" :form="from"></RoleEdit>
	</div>
</template>

<script setup lang="ts">
// 图标
import { Search, Tickets } from "@element-plus/icons-vue";
import { ref } from "vue";
// 引入dayjs格式化时间
import formatTime from "@/utils/formatTime";
import useTable from "@/hooks/useTable";
import * as role from "@/request/modules/role";
import type { roleListItem } from "@/types/global";
import type { Ref } from "vue";
import RoleEdit from "./components/RoleEdit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const keyword = ref("");
// 查询
const handlerFilter = () => {
	fetchData();
	keyword.value = "";
};
// 角色列表请求
let { tableList, pagination, handleSizeChange, handleCurrentChange, fetchData } = useTable(role.roleListAPI, { keyword });
// 模态框显隐状态
const modelVisible = ref(false);
const from = ref({}) as Ref<roleListItem>;
// 定义一个状态用来表示编辑或添加
const newAdded = ref("编辑");
// 角色编辑
const showModal = (row: roleListItem) => {
	newAdded.value = "编辑";
	from.value = row;
	modelVisible.value = true;
};
// 添加角色
const handleAddRole = () => {
	newAdded.value = "添加";
	from.value = {
		adminCount: 0,
		createTime: "",
		description: "",
		id: 0,
		name: "",
		sort: 0,
		status: 0,
	};
	modelVisible.value = true;
};
// 取消
const handleCancel = () => {
	modelVisible.value = false;
};
// 确定
const handleConfirm = (form: roleListItem) => {
	ElMessageBox.confirm(`此操作将${newAdded.value}当前用户信息,是否继续?`, "提示")
		.then(async () => {
			if (newAdded.value === "添加") {
				// 创建角色
				await role.createRoleAPI(form);
				// 请求成功关闭模态框
				modelVisible.value = false;
				// 更改后重新请求用户列表数据，更新页面
				fetchData();
				ElMessage({
					type: "success",
					message: "操作成功",
				});
			} else {
				// 提交修改后的用户数据
				await role.updatedRoleAPI(form);
				// 请求成功关闭模态框
				modelVisible.value = false;
				// 更改后重新请求用户列表数据，更新页面
				fetchData();
				ElMessage({
					type: "success",
					message: "操作成功",
				});
			}
		})
		.catch(() => {
			// 取消
		});
};

// 是否启用开关
const handleChange = async (row: roleListItem) => {
	// console.log(row.status);
	let res = await role.updatedRoleAPI({ id: row.id, status: row.status });
	fetchData();
	ElMessage({
		type: "success",
		message: "状态修改成功",
	});
};
// 分配菜单
const allocMenuFn = (row: any) => {
	// console.log(1);

	router.push(`/ums/allocMenu?id=${row.id}`);
};
// 分配资源
const allocResourceFn = (row: any) => {
	router.push(`/ums/allocResource?id=${row.id}`);
};
</script>

<style lang="less" scoped>
.role {
	padding: 20px 20px 10px;
	// 搜索
	.search_box {
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
		.search_top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			.search_title {
				display: flex;
				align-items: center;
				.search_title_content {
					font-size: 14px;
				}
			}
			.search_reset_button {
				display: flex;
				align-items: center;
				font-size: 12px;
			}
		}
		.search_bottom {
			display: flex;
			align-items: center;
			padding: 20px 40px 0;
			.search_input_label {
				font-size: 14px;
				margin-right: 12px;
			}
			.search_input_box {
				width: 200px;
			}
		}
	}
	// 添加
	.add_box {
		height: 61px;
		padding: 20px;
		margin: 20px 0;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.add_left_icon {
			display: flex;
			align-items: center;
			.add_left_icon_item {
				font-size: 14px;
				margin-left: 10px;
			}
		}
	}
	// 数据列表
	.data_box {
		padding-bottom: 20px;
		font-size: 12px;
		overflow-x: auto;
		:deep(.el-table .cell) {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 12px;
		}
	}
	// 分页器
	.pagination_box {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
